<template>
  <div class="notice">
    <div style="width: 100%;height: 95.5%;overflow: hidden;">
      <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px;text-align: left">
        <div class="notice-card" style="width: 100%;height: 66%;padding-bottom: 0">
          <div class="notice-card-content">
            <div style="position: absolute;left: 0;width: 25%;height: 100%;margin-top: -16px">
              <div style="height: 100%;width: 100%;padding: 16px;">
                <div style="height: 100%;width: 100%;">
                  <h1>尊敬的{{nickname}}，您好!</h1>
                  <span>您有{{getCount}}条通知未读。</span>
                  <div style="width: 100%;height: 85%;overflow: hidden;margin-top: 6px">
                    <div style="overflow-y:scroll;width: 106%;height: 100%;text-align: left;">
                      <ul class="notice-ul">
                        <div v-if="work_list.length>0">
                          <li v-for="(item,key) in total_list" :key="key">
                            <div>
                              <span class="ul-label">{{key+1}}</span>
                              <a class="li-font" href="javascript:void(0)" @click="read(item)">{{item.noticeTitle}}</a>
                              <span style="position:absolute;right: 2%;color: gray">{{item.createTime.substring(0,10)}}</span>
                            </div>
                          </li>
                        </div>
                        <div v-else>
                          <li >
                            <div>
                              <span class="li-font" >暂无未读的通告信息</span>
                            </div>
                          </li>
                        </div>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div style="position: absolute;right: 25%;width: 50%;height: 100%;margin-top: -16px">
              <div style="height: 100%;width: 100%"><div id="Z" style="height: 100%;width: 100%"></div></div>
            </div>
            <div style="position: absolute;right: 0;width: 30%;height: 100%;margin-top: -16px">
              <div style="height: 100%;width: 100%"><div id="H" style="height: 100%;width: 100%"></div></div>
            </div>
          </div>
        </div>
        <div class="notice-card" style="width: 24%;margin-left: 1.4%;padding-right: 0;">
          <div class="notice-card-content" style="border-top: 2px #E7EAEC solid;padding: 0">
            <div class="notice-title">
                <h3>日常通知</h3>
                <div class="notice-title-icon">
                  <Badge text="hot"></Badge>
                </div>
            </div>
            <div class="notice-content">
              <div style="width: 100%;height: 85%;overflow: hidden;margin-top: 6px">
                <div style="overflow-y:scroll;width: 106%;height: 100%;text-align: left;">
                  <ul class="notice-ul">
                    <div v-if="daily_list.length>0">
                      <li v-for="(item,key) in daily_list" :key="key">
                        <div>
                          <a class="li-font" href="javascript:void(0)" @click="read(item)">{{item.noticeTitle}}</a>
                          <span style="position:absolute;right: 4%;color: gray">{{item.createTime.substring(0,10)}}</span>
                        </div>
                      </li>
                    </div>
                    <div v-else>
                      <li>
                        <div>
                          <span class="li-font">暂无未读的日常通告信息</span>
                        </div>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="notice-card" style="width: 24%;padding-right: 0">
          <div class="notice-card-content" style="border-top: 2px #E7EAEC solid;padding: 0">
            <div class="notice-title">
              <h3>工作通知</h3>
              <div class="notice-title-icon">
                <Badge text="new" type="warning"> </Badge>
              </div>
            </div>
            <div class="notice-content">
              <div style="width: 100%;height: 85%;overflow: hidden;margin-top: 6px">
                <div style="overflow-y:scroll;width: 106%;height: 100%;text-align: left;">
                  <ul class="notice-ul">
                    <div v-if="work_list.length>0">
                      <li v-for="(item,key) in work_list" :key="key">
                        <div>
                          <a class="li-font" href="javascript:void(0)" @click="read(item)">{{item.noticeTitle}}</a>
                          <span style="position:absolute;right: 4%;color: gray">{{item.createTime.substring(0,10)}}</span>
                        </div>
                      </li>
                    </div>
                    <div v-else>
                      <li>
                        <div>
                          <span class="li-font">暂无未读的工作通告信息</span>
                        </div>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="notice-card" style="width: 24%;padding-right: 0">
          <div class="notice-card-content" style="border-top: 2px #E7EAEC solid;padding: 0">
            <div class="notice-title">
              <h3>人事通知</h3>
              <div class="notice-title-icon">
                <Badge text="new" type="success"> </Badge>
              </div>
            </div>
            <div class="notice-content">
              <div style="width: 100%;height: 85%;overflow: hidden;margin-top: 6px">
                <div style="overflow-y:scroll;width: 106%;height: 100%;text-align: left;">
                  <ul class="notice-ul">
                    <div v-if="hr_list.length>0">
                      <li v-for="(item,key) in hr_list" :key="key">
                        <div>
                          <a class="li-font" href="javascript:void(0)" @click="read(item)">{{item.noticeTitle}}</a>
                          <span style="position:absolute;right: 4%;color: gray">{{item.createTime.substring(0,10)}}</span>
                        </div>
                      </li>
                    </div>
                    <div v-else>
                      <li>
                        <div>
                          <span class="li-font">暂无未读的人事通告信息</span>
                        </div>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="notice-card" style="width: 24%;padding-right: 0">
          <div class="notice-card-content" style="border-top: 2px #E7EAEC solid;padding: 0">
            <div class="notice-title">
              <h3>财务通知</h3>
              <div class="notice-title-icon">
                <Badge text="new"> </Badge>
              </div>
            </div>
            <div class="notice-content">
              <div style="width: 100%;height: 85%;overflow: hidden;margin-top: 6px">
                <div style="overflow-y:scroll;width: 106%;height: 100%;text-align: left;">
                  <ul class="notice-ul">
                    <div v-if="finance_list.length>0">
                      <li v-for="(item,key) in finance_list" :key="key">
                        <div>
                          <a class="li-font" href="javascript:void(0)" @click="read(item)">{{item.noticeTitle}}</a>
                          <span style="position:absolute;right: 4%;color: gray">{{item.createTime.substring(0,10)}}</span>
                        </div>
                      </li>
                    </div>
                    <div v-else>
                      <li>
                        <div>
                          <span class="li-font">暂无未读的财务通知信息</span>
                        </div>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="notice-flex-right" @click="()=>{this.getSimpleUser();this.showdraw=true}">
      <p>发<br>布<br>通<br>告</p>
    </div>
    <Drawer
      title="发布通告"
      v-model="showdraw"
      width="30"
      :mask-closable="false"
      :closable="false"
    >
      <Form ref="formData" :model="formData" :rules="addRuleVal" :label-width="110">
        <FormItem label="标题：" prop="noticeTitle">
          <Input v-model="formData.noticeTitle" placeholder="请输入通告标题..."></Input>
        </FormItem>
        <FormItem label="内容：" prop="noticeContent">
          <Input type="textarea" :rows="4" v-model="formData.noticeContent" placeholder="请输入通告内容..."></Input>
        </FormItem>
        <FormItem label="通告类型：" prop="category">
          <Select v-model="formData.category" placeholder="请选择通告类型...">
            <Option value="日常通告">日常通告</Option>
            <Option value="工作通告">工作通告</Option>
            <Option value="人事通告">人事通告</Option>
            <Option value="财务通告">财务通告</Option>
          </Select>
        </FormItem>
        <FormItem label="接收人：">
          <CheckboxGroup v-model="formData.receiverId">
            <Checkbox v-for="(item,key) in simpleUser" :key="key" :label="item.id">{{item.nickname}}</Checkbox>
          </CheckboxGroup>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 8px" @click="handleReset('formData')">取消</Button>
        <Button type="primary" @click="handleSubmit('formData')">提交</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import {toGet,toPost} from "../../utils/MyAxios";
  import echarts from 'echarts';
  import {mapActions,mapGetters} from 'vuex';
  import {gatewayUrl} from '../../configs/BaseConfigs';
    export default {
        name: "index",
        data() {
            return {
              showdraw:false,
              formData:{},
              nickname:'',
              addRuleVal:{
                noticeTitle: [
                  { required: true, message: '请输入通告标题', trigger: 'blur' }
                ],
                noticeContent: [
                  { required: true, message: '请输入通告内容', trigger: 'blur' }
                ],
                category: [
                  { required: true, message: '请选择通告类型', trigger: 'blur' }
                ],
              },
            }
        },
        computed: {
          ...mapGetters(['work_list','hr_list','daily_list','finance_list','total_list','simpleUser']),
          getCount(){
            return this.total_list.length;
          }
        },
        methods: {
          ...mapActions(['getNoticeList','getSimpleUser']),
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
              if(this.formData.receiverId.length>0){
                let params = {
                  noticeTitle:this.formData.noticeTitle,
                  noticeContent:this.formData.noticeContent,
                  publisherId:localStorage.getItem('userId'),
                  category:this.formData.category,
                  receiverId:this.formData.receiverId.join(','),
                };
                toPost('/notice-information/notice/add',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.getNoticeList();
                      this.$Notice.success({
                        title: '通告发布成功'
                      });
                      this.$refs[name].resetFields();

                      this.showdraw=false;
                      this.formData.receiverId=[];

                    }else{
                      this.$Notice.error({
                        title: '通告发布息失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  })
              }else{
                this.$Notice.warning({
                  title: '请先上传文件后再尝试'
                })
              }
            });
          },
          handleReset (name) {
            this.showdraw=false;
            this.formData.receiverId=[];
            this.$refs[name].resetFields();
          },
          jump(e){
            this.$router.push(e);
          },
          drawH(data){
            let myCharts=echarts.init(document.getElementById('H'));

            let option = {
              title : {
                text: '通知通告情况',
                textStyle: {
                  color: '#235894'
                },
                x:'4%'
              },
              legend: {
                x:'right',
              },
              tooltip: {},
              dataset: {
                source: data
              },
              color: ['#7EC0EE', '#C9C9C9', '#FF9F7F', '#FFD700'],
              series: [{
                type: 'pie',
                name:'日常通知',
                encode: {
                  itemName: '类型',
                  value: '日常通知'
                },
                center: ['30%', '30%'],
                avoidLabelOverlap: false,
                radius: ['20%', '30%'],
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold'
                    }
                  }
                }
              }, {
                type: 'pie',
                name:'工作通知',
                encode: {
                  itemName: '类型',
                  value: '工作通知'
                },
                center: ['70%', '30%'],
                avoidLabelOverlap: false,
                radius: ['20%', '30%'],
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold'
                    }
                  }
                }
              }, {
                type: 'pie',
                name:'人事通知',
                center: ['30%', '70%'],
                encode: {
                  itemName: '类型',
                  value: '人事通知'
                },
                avoidLabelOverlap: false,
                radius: ['20%', '30%'],
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold'
                    }
                  }
                }
              }, {
                type: 'pie',
                name:'财务通知',
                center: ['70%', '70%'],
                encode: {
                  itemName: '类型',
                  value: '财务通知',
                },
                radius: ['20%', '30%'],
                avoidLabelOverlap: false,
                label: {
                  normal: {
                    show: false,
                    position: 'center'
                  },
                  emphasis: {
                    show: true,
                    textStyle: {
                      fontSize: '20',
                      fontWeight: 'bold'
                    }
                  }
                }
              }]
            };
            myCharts.setOption(option);
            window.addEventListener('resize',function(){
              myCharts.resize();
            });
          },
          drawZ(data){
            let myCharts=echarts.init(document.getElementById('Z'));
            let option = {
              title: {
                text: '通知总览',
                textStyle: {
                  color: '#235894'
                },
                x:'4%'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  lineStyle: {
                    color: '#ddd'
                  }
                },
                backgroundColor: 'rgba(255,255,255,1)',
                padding: [5, 10],
                textStyle: {
                  color: '#7588E4',
                },
                extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
              },
              legend: {
                right: '9%',
                data: ['日常通知','工作通知','人事通知','财务通知'],
              },
              xAxis: {
                type: 'category',
                data: data.x,
                boundaryGap: false,
                splitLine: {
                  show: true,
                  interval: 'auto',
                  lineStyle: {
                    color: ['#D4DFF5']
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 14
                  },
                }
              },
              yAxis: {
                type: 'value',
                splitLine: {
                  lineStyle: {
                    color: ['#D4DFF5']
                  }
                },
                axisTick: {
                  show: false
                },
                axisLabel: {
                  margin: 10,
                  textStyle: {
                    fontSize: 14
                  }
                }
              },
              series: [{
                name: '日常通知',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 3,
                data: data.rc,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(199, 237, 250,0.5)'
                    }, {
                      offset: 1,
                      color: 'rgba(199, 237, 250,0.2)'
                    }], false)
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#7EC0EE'
                  }
                },
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }, {
                name: '工作通知',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 3,
                data: data.gz,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(216, 244, 247,1)'
                    }, {
                      offset: 1,
                      color: 'rgba(216, 244, 247,1)'
                    }], false)
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#C9C9C9'
                  }
                },
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }, {
                name: '人事通知',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 3,
                data: data.rs,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(216, 244, 247,1)'
                    }, {
                      offset: 1,
                      color: 'rgba(216, 244, 247,1)'
                    }], false)
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#FF9F7F'
                  }
                },
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }, {
                name: '财务通知',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 3,
                data: data.cw,
                areaStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: 'rgba(216, 244, 247,1)'
                    }, {
                      offset: 1,
                      color: 'rgba(216, 244, 247,1)'
                    }], false)
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#FFD700'
                  }
                },
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }]
            };
            myCharts.setOption(option);
            window.addEventListener('resize',function(){
              myCharts.resize();
            });
          },
          read(notice){
            this.$Modal.info({
              title: notice.noticeTitle,
              content: notice.noticeContent,
              okText:'标记已读',
              onOk: () => {
                toGet('/notice-information/notice/read/'+notice.id)
                  .then(res=>{
                    if(res.resultCode === 0) {
                      this.getNoticeList();
                    }else{
                      this.$Message.error('服务器发生意外错误');
                    }
                  });
              },
            });
          },
        },
        mounted() {
          this.getNoticeList();
          this.nickname=localStorage.getItem("nickname");
          toGet('/notice-information/notice/count/'+localStorage.getItem("userId"))
            .then(res=>{
              let hxt=[
                ['类型', '日常通知', '财务通知','人事通知','工作通知'],
                ['总计'],
                ['已读'],
                ['未读'],
                ['发送'],
              ];
              //总计 已读 未读 发送
              if(res.resultCode === 0) {
                let data=res.data;
                hxt[1].push(data.hxt.daily[0]);
                hxt[1].push(data.hxt.finance[0]);
                hxt[1].push(data.hxt.hr[0]);
                hxt[1].push(data.hxt.work[0]);
                hxt[2].push(data.hxt.daily[1]);
                hxt[2].push(data.hxt.finance[1]);
                hxt[2].push(data.hxt.hr[1]);
                hxt[2].push(data.hxt.work[1]);
                hxt[3].push(data.hxt.daily[2]);
                hxt[3].push(data.hxt.finance[2]);
                hxt[3].push(data.hxt.hr[2]);
                hxt[3].push(data.hxt.work[2]);
                hxt[4].push(data.hxt.daily[3]);
                hxt[4].push(data.hxt.finance[3]);
                hxt[4].push(data.hxt.hr[3]);
                hxt[4].push(data.hxt.work[3]);
                this.drawH(hxt);
                this.drawZ(data.zxt);
              }
            });
        }
    }
</script>

<style scoped>


</style>
